
function CompileUrl(url){
	document.write("<script language=javascript src="+url+"></script>");
}

function addobserv(url){
	document.write("<script language=javascript src="+url+"></script>");
}

function addScript(url){
	document.write("<script language=javascript src="+url+"></script>");
}

CompileUrl('./Compile.js')
addobserv('./observe.js')
addScript('./Watcher.js')

class Vue{
    constructor(options){
     //把options对象 存为 $options
     this.$options=options  || {}
     //数据
     this._data=options.data || undefined
     //数据变为响应式 
     observe(this._data)
     //初始化data  默认数据要变成响应式  这里就是生命周期
     this._initData()
     this._initComputed()
     this._initWatch()
     //模板的编译
     new Compile(options.el,this)//this是上下文
      

    }

    _initData(){
      let self=this
      Object.keys(this._data).forEach((key)=>{
          // console.log('////'+key)
           Object.defineProperty(self,key,{
               get(){
                  return self._data[key]
               },
               set(newValue){
                  self._data[key]=newValue
               }

           })
      })

    }

    _initComputed(){
        let self=this
        let computed=this.$options.computed
        //只有当值改变的时候才触发
        //console.log('///// computed')
        Object.keys(computed).forEach((key)=>{
             new Watcher(self,key,computed[key])
        })
    }
    _initWatch(){
        let self=this
        let watch=this.$options.watch
        //只有当值改变的时候才触发
        Object.keys(watch).forEach((key)=>{
             new Watcher(self,key,watch[key])
        })
    }



}

window.Vue=Vue